<template>
  <div class="focus-music" :style="rootStyle">
    <g-help v-if="content" :name="name" :content="content" />
    <g-timer />
    <div class="focus-music__control">
      <div class="focus-music__title">{{ music.name }}</div>
      <van-progress :percentage="percentage" />
      <div class="music-control__back" @click="jump('pre')">
        <van-icon name="replay" />
      </div>
      <div class="music-control__play">
        <van-icon :name="state" @click="togglePlay" />
      </div>
      <div class="music-control__forward" @click="jump('next')">
        <van-icon name="replay" />
      </div>
    </div>

    <van-dialog
      v-model="visible"
      class="focus-dialog"
      show-cancel-button
      cancel-button-text="不想记录"
      cancel-button-color="#aaaaaa"
      confirm-button-text="记录此刻"
      confirm-button-color="#05c0c0"
      @confirm="toRecord"
    >
      <div class="focus-dialog__header">恭喜您完成了</div>
      <div class="focus-dialog__body">
        <div class="text-main">{{ totalTime }}</div>
        <div class="text-sub">分钟</div>
      </div>
      <div class="focus-dialog__footer">{{ music.name }}</div>
    </van-dialog>
  </div>
</template>

<script>
import { Icon } from 'vant'
// import { getKnowledge } from '../../home/api'
import api from '@/config'
import Progress from './Progress.vue'
import GTimer from '@/components/GTimer.vue'
import { getKnowledge } from '../../detail/api'
import Taro from '@tarojs/taro'
import GHelp from '@/components/GHelp.vue'
import { Dialog } from 'vant'
import TimeMixin from './timeMixin'

export default {
  components: {
    GTimer,
    GHelp,
    [Dialog.Component.name]: Dialog.Component,
    [Icon.name]: Icon,
    [Progress.name]: Progress
  },
  mixins: [TimeMixin],
  data() {
    return {
      visible: false,
      innerAudioContext: null,
      state: 'play',
      music: {},
      duration: 0,
      current: 0,
      timer: null,
      name: '',
      content: null
    }
  },
  computed: {
    rootStyle() {
      if (this.music && this.music.thumbnail) {
        return {
          backgroundImage: `url(${this.music.thumbnail})`
        }
      }
      return ''
    },
    percentage() {
      if (!this.duration) {
        return 0
      }
      return (this.current / this.duration).toFixed(2) * 100
    }
  },
  onLoad(options) {
    this.name = options.id + ''
    Taro.setNavigationBarTitle(options)
    this.getMusic(options.id)
  },
  onUnload() {
    this.timer && clearInterval(this.timer)
    this.innerAudioContext.destroy()
  },
  methods: {
    async getMusic(id) {
      const { article = {}} = await getKnowledge(id)
      this.content = article.content
      this.music = article
      if (this.music.videoUrl) {
        this.initMusic(this.music.videoUrl)
      } else {
        Taro.showModal({
          title: '温馨提示',
          content: '暂无音乐',
          showCancel: false
        })
      }
    },
    initMusic(src) {
      this.innerAudioContext = wx.createInnerAudioContext({
        useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
      })

      this.innerAudioContext.onEnded(() => {
        this.state = 'play'
        this.setTotalTime(true)
        this.visible = true
      })

      this.innerAudioContext.src = api.base + src
    },
    updateTime() {
      this.duration = this.innerAudioContext.duration
      this.current = this.innerAudioContext.currentTime
    },
    startInterval() {
      if (this.timer) {
        return
      }
      this.timer = setInterval(this.updateTime, 10)
    },
    togglePlay() {
      if (this.innerAudioContext.paused) {
        this.innerAudioContext.play()
        this.state = 'pause'
        this.setStartTime()
        this.startInterval()
      } else {
        this.setTotalTime()
        this.innerAudioContext.pause()
        this.state = 'play'
      }
    },
    jump(type) {
      const currentTime = this.innerAudioContext.currentTime
      let time = 0
      if (type === 'pre') {
        time = Math.max(currentTime - 15, 0)
      } else {
        time = Math.min(currentTime + 15, this.innerAudioContext.duration)
      }
      this.innerAudioContext.seek(time)
    },
    toRecord() {
      this.toPage('/pages/game/focus/record/index', {
        id: this.music.id
      })
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
